<template>
    <div>
        <!-- <el-button type="button" @click="adda()">增加</el-button> -->
        <el-form :inline="true" :model="formStudent" class="demo-form-inline"
            style="display: flex;align-items: center;height: 50px;">
            <!-- <el-form-item label="姓名"> -->
            <el-input v-model="formStudent.name" placeholder="姓名" style="width: 100px;"></el-input>
            <!-- </el-form-item> -->
            <!-- <el-form-item label="性别"> -->
            <el-select v-model="formStudent.sex" placeholder="性别">
                <el-option label="请选择性别" value=""></el-option>
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
            </el-select>
            <!-- </el-form-item> -->
            <!-- <el-form-item> -->
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <!-- </el-form-item> -->
        </el-form>
        <el-table :data="tableData" height="calc(100vh - 280px )" stripe class="tableData">
            <el-table-column prop="id" label="编号" width="180">
            </el-table-column>
            <el-table-column prop="name" label="名称" width="180">
            </el-table-column>
            <el-table-column prop="sex" label="性别" width="180">
            </el-table-column>
            <el-table-column prop="age" label="年龄">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button type="text" @click="handleUpdateClick(scope.row)" size="small">编辑</el-button>
                    <el-button type="text" @click="handleDelClick(scope.row)" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page"
            :page-size="limit" layout="prev,pager,next,jumper,->,total,sizes" :page-sizes="[10, 20, 50]"
            :total="totalCount">
        </el-pagination>

        <!-- prev,pager,next,jumper,->,total,sizes -->

        <el-dialog title="编辑学员" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="编号" :label-width="formLabelWidth">
                    <el-input v-model="form.id" :readonly="true" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别" :label-width="formLabelWidth">
                    <el-select v-model="form.sex" placeholder="请选择活动区域">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="年龄" :label-width="formLabelWidth">
                    <el-input v-model="form.age" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="update">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
// import axios from 'axios';
import { findAll, del,update } from '@/api/student'

export default {
    data() {
        return {
            tableData: [],
            totalCount: 0,
            page: 0,
            limit: 20,
            formStudent: {
                name: "",
                sex: ""
            },
            form: {
                name: '',
                sex: '',
                age: 0,
                id: 0
            },
            dialogFormVisible: false,
            formLabelWidth: "100px"
        }
    },
    mounted() {
        this.findAll();
    },
    methods: {
        // async adda() {
        //     // const res = await axios.post(`http://192.168.0.64:1515/xc/student/add`, {
        //     //     params: {
        //     //         ...this.formStudent,
        //     //         page: this.page,
        //     //         limit: this.limit
        //     //     }
        //     // })
        //     const res = await add({})
        //     if (res.data.msg == "success") {
        //         this.$message("新增成功")
        //     } else {
        //         this.$message("新增失败")
        //     }
        // },
        // async udpate() {
        //     // const res = await axios.post(`http://192.168.0.64:1515/xc/student/update`, {
        //     //     params: {
        //     //         ...this.formStudent,
        //     //         page: this.page,
        //     //         limit: this.limit
        //     //     }
        //     // })
        //     this.fandService("xc/student/delete", {
        //         ...this.formStudent,
        //         page: this.page,
        //         limit: this.limit
        //     })
        // },
        // async delete() {
        //     // const res = await axios.post(`http://192.168.0.64:1515/xc/student/delete`, {
        //     //     params: {
        //     //         ...this.formStudent,
        //     //         page: this.page,
        //     //         limit: this.limit
        //     //     }
        //     // })
        //     this.fandService("xc/student/delete", {
        //         ...this.formStudent,
        //         page: this.page,
        //         limit: this.limit
        //     })
        // },
        // async fandService(url, obj) {
        //     // let baseUrl = `http://192.168.0.64:1515`;
        //     // const res = await axios.post(baseUrl + url, {
        //     //     params: obj
        //     // })
        //     // const _axios=axios.create({
        //     //     baseURL:`http://192.168.0.64:1515`
        //     // })
        //     // const res=_axios.get("xc/student/delete",{})
        // }
        // ,
        async findAll() {
            // {
            //     page:this.page,
            //     limit:this.limit
            // }
            // const parmas = new URLSearchParams();
            // parmas.append("name", "啊啊啊啊")
            // const res = await axios.get(`http://192.168.0.64:1515/xc/student`, {
            //     params: {
            //         ...this.formStudent,
            //         page: this.page,
            //         limit: this.limit
            //     }
            // })
            const res = await findAll({ ...this.formStudent, page: this.page, limit: this.limit })
            // const resa = await axios.get(`http://192.168.0.64:1515/xc/student`, {

            //         ...this.formStudent,
            //         page: this.page,
            //         limit: this.limit

            // })
            // const res = await axios.get(`http://localhost:1515/xc/student?page=${this.page}&limit=${this.limit}`)
            // const res = await axios.post("http://192.168.0.64:1515/xc/student/b", parmas)
            console.log(res);

            this.tableData = res.data.data;
            this.totalCount = res.data.count;
            // let a = {
            //     a: 1,
            //     b: 2

            // }
            // let aa = {
            //     aa: 2,
            //     bb: 2
            // }
            // console.log({ ...a, ...aa });

        },
        handleSizeChange(val) {
            this.limit = val;
            // console.log(`每页 ${val} 条`);
            this.findAll();
        },
        handleCurrentChange(val) {
            this.page = val;
            // console.log(`当前页: ${val}`);
            this.findAll();
        },
        onSubmit() {

            this.findAll();
        },
        async handleUpdateClick(obj) {
            // obj就是当前行数据
            console.log(obj, "update");
            this.dialogFormVisible = true;
            this.form = { ...obj };

        },
        async handleDelClick(obj) {
            // obj就是当前行数据
            console.log(obj, "del");
            try {
                await this.$confirm('是否舍得删除该消息吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                // const res = await axios.delete(`http://192.168.0.64:1515/xc/student/${obj.id}`)
                const res = await del(obj.id);
                if (res.data.count > 0) {
                    this.$message('删除成功');
                    this.findAll();//删除成功，则需要重新刷新数据
                } else {
                    this.$message('删除失败');
                }
            } catch (error) {
                this.$message('你点了取消操作');
            }

            // 一般和服务端有规定：约定俗成的东西
            // 一般更新数据，返回的是影响数据的条数
            // 查询直接返回数据
            // 数据的格式为：
            // let resp = {
            //     code: 0,
            //     msg: 'success',
            //     count: 1,
            //     data: []
            // }

        },
        async update() {
            // const res = await axios.put("http://192.168.0.64:1515/xc/student", {}, {
            //     params: {
            //         ...this.form
            //     }
            // })
            const res = await update({ ...this.form })
            if (res.data.count > 0) {
                // this.$message('编辑成功');
                this.findAll();//则需要重新刷新数据
                this.dialogFormVisible = false;
            } else {
                // this.$message('编辑失败');
            }
        }
    }
}
</script>
<style>
table thead tr {
    line-height: 30px;
}

.tableData {
    height: calc(100vh - 60px- 40px);
}
</style>